<template>
  <div class="chat-content" id="insideIm-content" v-loading="loadingListData">
    <template v-if="msgList.length > 0">
      <div v-if="hasNextPage" class="iconfont-wrap" @click="loadMoreMsgs">
        <i class="el-icon-refresh"></i>
        <span class="load-more">{{$t('common.notification.showHistoryMessage')}}</span>
      </div>
      <div v-else class="iconfont-wrap">
        <span class="load-more">{{$t('im.imChat.components.messageBox.chattingRecords.des3')}}</span>
      </div>
      <div class="chat-content-list">
        <div
          class="chat-content-list-item"
          v-for="(item, i) in renderMsgList"
          :key="item.id"
          :style="{ 'padding-top': item.messageType === 'groupDynamic' ? '8px' : '20px' }"
        >
          <!-- 用户级别消息 -->
          <template v-if="userComponentsMap[item.messageType]">
            <div
              class="user-message"
              :class="{ 'user-message-right': item.rightDisplay }"
            >
              <!-- 头像 -->
              <Avatar :msg-info="item" v-user="item.sendUserId" />
              <div class="user-message-content">
                <!-- 群聊发送人 -->
                <div class="send-user-name" v-if="item.chatType === 2">{{ item.sendUserName }}</div>
                <!-- 消息内容 -->
                <component
                  :is="userComponentsMap[item.messageType]"
                  :msg-info="item"
                  :idx="i"
                />
                <!-- 发送时间 -->
                <div class="user-message-sendTime" v-if="item.sendTimeStr">
                  {{ item.sendTimeStr }}
                </div>
              </div>
            </div>
          </template>
          <!-- 群聊消息提示 -->
          <div class="iconfont-wrap group-msg" v-if="item.messageType === 'groupDynamic'">
            <span class="load-more">{{ item.messageContent && item.messageContent.msg }}</span>
          </div>
          <!-- 业务卡片类型 -->
          <template v-if="bizComponentsMap[item.messageType]">
            <component
              :is="bizComponentsMap[item.messageType]"
              :msg-info="item"
              :idx="i"
            />
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
/** vue */
import TextMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/TextMessage';
import ImageMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/ImageMessage';
import FileMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/FileMessage';
import Avatar from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/Avatar';
import BizTask from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/BizTask';
import BizCustomer from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/BizCustomer';
import BizEvent from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/BizEvent';
import EventMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/EventMessage';
import TaskMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/TaskMessage';
import CustomerMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/CustomerMessage';
import ReportMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/ReportMessage';
import ParagraphMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/ParagraphMessage/index.js';
/** util */
import { fmt_datetime } from '@src/filter/fmt.js';
const userComponentsMap = {
  text: 'TextMessage',
  image: 'ImageMessage',
  file: 'FileMessage',
  paragraph: 'ParagraphMessage',
  event: 'EventMessage',
  task: 'TaskMessage',
  customer: 'CustomerMessage',
  report: 'ReportMessage'
};

// bizComponentsMap前端自定义类型
const bizComponentsMap = {
  biz_task: 'BizTask',
  biz_event: 'BizEvent',
  biz_customer: 'BizCustomer',
};

export default {
  name: 'chat-content',
  props: {
    msgList: {
      type: Array,
      default: () => [],
    },
    hasNextPage: {
      type: Boolean,
      default: false,
    },
    loadingListData: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      userComponentsMap,
      bizComponentsMap,
    };
  },
  created() {
    this.$eventBus.$on('scrollBottom_insideIM', this.scrollBottom);
  },
  destroyed() {
    this.$eventBus.$off('scrollBottom_insideIM');
  },
  computed: {
    renderMsgList() {
      return this.msgList;
    },
  },
  methods: {
    fmt_datetime,
    /** 聊天滚动到底部 */
    scrollBottom() {
      this.$nextTick(() => {
        setTimeout(() => {
          const dom = document.getElementById('insideIm-content');
          if (!dom) return;
          dom.scrollTo({ top: dom.scrollHeight });
        }, 10);
      });
    },
    loadMoreMsgs() {
      this.$emit('queryChatRecord', true);
    },
  },
  components: {
    Avatar,
    TextMessage,
    ImageMessage,
    FileMessage,
    ParagraphMessage,
    BizTask,
    BizCustomer,
    BizEvent,
    EventMessage,
    TaskMessage,
    CustomerMessage,
    ReportMessage,
  },
};
</script>

<style scoped lang='scss'>
@import '@src/modules/system/frame/component/InternalCoordination/chat/scss/user-message.scss';

.chat-content {
  flex: 1;
  box-sizing: border-box;
  padding: 16px 16px 34px 16px;
  overflow-y: auto;
  .iconfont-wrap {
    font-size: 12px;
    color: #262626;
    i {
      color: $color-primary-light-6;
    }
    // height: 30px;
    text-align: center;
    line-height: 20px;
  }
  .chat-content-list {
    width: 100%;
    .chat-content-list-item {
      font-size: 14px;
      padding-top: 20px;
      width: 100%;
    }
  }
}

.no-message {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    width: 160px;
    height: 160px;
  }
  span {
    margin-top: 8px;
    width: 56px;
    color: #171a1d;
  }
}
</style>